<template>
  <div v-if="!isProd()" class="env-info" :class="envClass">
    {{ getEnv().toUpperCase() }}
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { getEnv, isProd, isDev, isTest, isStaging } from '@/utils/env'

// 根据环境设置不同的样式类
const envClass = computed(() => {
  if (isDev()) return 'env-dev'
  if (isTest()) return 'env-test'
  if (isStaging()) return 'env-staging'
  return ''
})
</script>

<style scoped>
.env-info {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  z-index: 9999;
  opacity: 0.8;
}

.env-dev {
  background-color: #409eff;
}

.env-test {
  background-color: #e6a23c;
}

.env-staging {
  background-color: #67c23a;
}
</style> 